<template>
  <div>
    <top-caption :caption="status"></top-caption>
    <div class="comments">
      <template v-for="comment in info.comments">
        <div class="comment">
          <div class="title">标题：{{comment.title}}</div>
          <div class="author">
            <span class="photo autoImage">
              <img :src="comment.author.photo">
            </span>
            <el-rate
                    v-model="comment.rating"
                    disabled
                    text-color="#666">
            </el-rate>
            <span class="created_at">{{comment.created_at}}</span>
          </div>
          <p>{{comment.summary}}</p>
          <div class="approval">{{comment.approval}}赞成&nbsp;&nbsp;{{comment.reject}}反对</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
    import {getLongComment} from 'src/api/index'
  import caption from './caption.vue'
    export default {
      components:{ 'top-caption': caption },
        data:function () {
            return {
                status: '',
                info: {
                    title: '',
                    comments: []
                }
            }
        },
        props:{
          id:{
              type: String,
              required: true
          }
        },
        created: function () {
            let vm = this;
            vm.status = '正在加载...'
            getLongComment(this.id)
                .then(function (info) {
                    vm.info = info
                    vm.status = info.title
                })
                .catch(function(error){
                    console.log('%c' + error, 'color:red')
                    vm.status = '加载失败'
                })
        },
        methods: {
        }
    }
</script>
<style scoped>
</style>
<style lang="scss" scoped>
  .comments{
    padding: 10px;
    background-color: #E5E9F2;

    .comment {
      margin-top: 10px;
      border-bottom: 1px solid #d6d3d3;

      .title {
        margin-bottom: 10px;
        font-size: 16px;
      }

      .author {
        margin: 10px 0;
        .photo {
          display: inline-block;
          width: 48px;
          height: 48px;
          border-radius: 24px;

          overflow: hidden;
        }
        .el-rate, .created_at {
          display: inline-block;
          overflow: hidden;
          line-height: 48px;
          height: 48px;
        }
      }

      p {
        margin: 10px 0;
      }

      .approval {
        text-align: right;
        margin-top: 10px;
      }
    }
  }
</style>